<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Management Policy Sections</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .policy-section, .answer-area {
            border: 1px solid #ddd;
            padding: 10px;
            min-width: 200px;
            min-height: 200px;
        }
        .policy {
            background-color: #f0f0f0;
            padding: 8px;
            margin: 5px;
            cursor: move;
        }
        .policy.dragging {
            opacity: 0.5;
        }
        button {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #answer {
            display: none;
            margin-top: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .drop-zone {
            border: 2px dashed #ccc;
            padding: 20px;
            margin: 10px 0;
            text-align: center;
            background-color: #f9f9f9;
        }
        .target {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h3>QUESTION NO: 100 DRAG DROP</h3>
    <p>Contoso, Ltd. provides an API to customers by using Azure API Management (APIM). The API authorizes users with a JWT token.</p>
    <p>You must implement response caching for the APIM gateway. The caching mechanism must detect the user ID of the client that accesses data for a given location and cache the response for that user ID.</p>
    <p>You need to add the following policies to the policies file:</p>
    <ul>
        <li>a set-variable policy to store the detected user identity</li>
        <li>a cache-lookup-value policy</li>
        <li>a cache-store-value policy</li>
        <li>a find-and-replace policy to update the response body with the user profile information</li>
    </ul>
    <p>To which policy section should you add the policies? To answer, drag the appropriate sections to the correct policies. Each section may be used once, more than once, or not at all.</p>
    <p><em>NOTE: Each correct selection is worth one point</em></p>

    <div class="container">
        <div class="policy-section" id="policy-sections">
            <h4>Policy section</h4>
            <div class="policy" draggable="true" data-policy="inbound">Inbound</div>
            <div class="policy" draggable="true" data-policy="outbound">Outbound</div>
        </div>
        
        <div class="answer-area" id="answer-area">
            <h4>Answer Area</h4>
            <div class="target">
                <p>Set-Variable</p>
                <div class="drop-zone" data-target="set-variable">Drop here</div>
            </div>
            <div class="target">
                <p>Cache-lookup-value</p>
                <div class="drop-zone" data-target="cache-lookup-value">Drop here</div>
            </div>
            <div class="target">
                <p>Cache-store-value</p>
                <div class="drop-zone" data-target="cache-store-value">Drop here</div>
            </div>
            <div class="target">
                <p>Find-and-replace</p>
                <div class="drop-zone" data-target="find-and-replace">Drop here</div>
            </div>
        </div>
    </div>

    <button onclick="showAnswer()">查看答案</button>
    
    <div id="answer">
        <p><strong>正确答案：</strong></p>
        <table>
            <tr>
                <th>Policy</th>
                <th>Policy Section</th>
            </tr>
            <tr>
                <td>Set-Variable</td>
                <td>Inbound</td>
            </tr>
            <tr>
                <td>Cache-lookup-value</td>
                <td>Inbound</td>
            </tr>
            <tr>
                <td>Cache-store-value</td>
                <td>Outbound</td>
            </tr>
            <tr>
                <td>Find-and-replace</td>
                <td>Outbound</td>
            </tr>
        </table>
        <p><strong>说明：</strong></p>
        <ul>
            <li><strong>Inbound 部分</strong>：用于处理请求进入时的策略，如设置变量和缓存查找。</li>
            <li><strong>Outbound 部分</strong>：用于处理响应返回时的策略，如缓存存储和响应内容修改。</li>
            <li>Set-variable 和 cache-lookup-value 应在 Inbound 阶段执行，以准备用户数据。</li>
            <li>Cache-store-value 和 find-and-replace 应在 Outbound 阶段执行，以处理响应数据。</li>
        </ul>
    </div>

    <script>
        let draggedItem = null;

        document.querySelectorAll('.policy').forEach(item => {
            item.addEventListener('dragstart', function() {
                draggedItem = this;
                setTimeout(() => {
                    this.classList.add('dragging');
                }, 0);
            });

            item.addEventListener('dragend', function() {
                this.classList.remove('dragging');
            });
        });

        document.querySelectorAll('.drop-zone').forEach(zone => {
            zone.addEventListener('dragover', function(e) {
                e.preventDefault();
            });

            zone.addEventListener('dragenter', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#e9f7fe';
            });

            zone.addEventListener('dragleave', function() {
                this.style.backgroundColor = '#f9f9f9';
            });

            zone.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#f9f9f9';
                if (draggedItem) {
                    const policySection = draggedItem.getAttribute('data-policy');
                    this.innerHTML = `<div class="policy" data-policy="${policySection}">${draggedItem.textContent}</div>`;
                }
            });
        });

        function showAnswer() {
            document.getElementById('answer').style.display = 'block';
        }
    </script>
</body>
</html>
